@import '../variables/breakpoints';

$grid-breakpoints-min: (
  phone: $screen-phone-min,
  tabletPortrait: $screen-tablet-portrait-min,
  tabletLandscape: $screen-tablet-landscape-min,
  smallDesktop: $screen-small-desktop-min,
  largeDesktop: $screen-large-desktop-min,
);
@mixin mediaMin($breakpoint-name) {
  @if map-has-key($grid-breakpoints-min, $breakpoint-name) {
    @media (min-width: #{map_get($grid-breakpoints-min, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}

$grid-breakpoints-max: (
  phone: $screen-phone-max,
  tabletPortrait: $screen-tablet-portrait-max,
  tabletLandscape: $screen-tablet-landscape-max,
  smallDesktop: $screen-small-desktop-max,
  largeDesktop: $screen-large-desktop-max,
);

@mixin mediaMax($breakpoint-name) {
  @if map-has-key($grid-breakpoints-max, $breakpoint-name) {
    @media (max-width: #{map_get($grid-breakpoints-max, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}

@mixin mediaMinMax($breakpoint-name) {
  @if map-has-key($grid-breakpoints-max, $breakpoint-name) {
    @media (min-width: #{map_get($grid-breakpoints-min, $breakpoint-name)}) and (max-width: #{map_get($grid-breakpoints-max, $breakpoint-name)}) {
      @content;
    }
  } @else {
    @error "breakpoint not supported!";
  }
}
